<template>
    <div class="serviceShops">
        <div class="top-nav" :style="{ backgroundImage: `url(${bgImg})` }">
            <div class="shop-info flex">
                <div class="left flex-column flex-align">
                    <img class="img" :src="serviceInfo.logo" alt="" />
                    <div class="login-status" v-if="serviceInfo.is_online == 1">
                        <div class="dot"></div>
                        <div class="fz12 cfff">在线</div>
                    </div>
                </div>
                <div class="middle">
                    <div class="title flex">
                        <div class="fz22 cfff">{{ serviceInfo.name }}</div>
                        <div class="tips flex-center-align ml10" style="background: #1B8DFF;">
                            {{ getServiceType(serviceInfo.type) }}
                        </div>
                        <div class="tips flex-center-align ml10" v-if="serviceInfo.type == 1"
                            style="background: #1B8DFF;">
                            平台推荐
                        </div>
                        <div v-if="serviceInfo.cash_deposit != 0" class="tips flex-center-align ml10" style="background: #FF6900;">
                            保证金{{ serviceInfo.cash_deposit }}
                        </div>
                    </div>
                    <div class="local cfff flex-align">
                        <i class="el-icon-location cfff mr10"></i>
                        {{ serviceInfo.city }} <span style="padding-left: 30px;">擅长服务：{{ service_cate_name }}</span>
                    </div>

                    <div class="text cfff" style="padding-bottom: 7px;">在平台使用过程中有任何疑问或需求欢迎来咨询，随时在线ing</div>

                    <div class="text cfff text-html" v-html="serviceInfo.introduce"></div>
                </div>
                <div class="right flex-center-align pointer" @click="openKefu">
                    <i class="el-icon-chat-dot-square mr10 fz16"></i>
                    <span>咨询商家</span>
                </div>
            </div>
        </div>
        <div class="main-content ">
            <div class="top flex-between">
                <!-- <div class="flex">
                        <div class="fw mr50" :class="{ c333: navCurrent == 0 }" @click="navCurrent = 0">
                            服务
                        </div>
                        <div v-show="serviceInfo.type != '6'" class="fw mr50" :class="{ c333: navCurrent == 1 }"
                            @click="navCurrent = 1">
                            公司简介
                        </div>
                    </div> -->
                <div class="box-title">
                    <img src="~/assets/images/service/servicedetail_fuwu_icon.png" alt="服务">
                    服务列表
                </div>

                <div class="box-search">
                    <el-input placeholder="店内搜索" v-model="keyword">
                    </el-input>
                    <div class="shousuo" @click="goSearch()">搜索</div>
                </div>
            </div>
            <div class="main-body flex">
                <div class="fw-page" v-show="navCurrent == 0">
                    <div v-if="fwList.length > 0">
                        <div v-for="(item, index) in fwList" :key="index">
                            <div class="item flex-between pointer" @click="
                                go(
                                    '/service/serviceshopsdetail?id=' +
                                    item.id
                                )
                                ">
                                <div class="left flex">
                                    <img class="img" :src="item.pic.split(',')[0]" alt="" />
                                    <div class="middle fz14 c666">
                                        <div class="c333 fz18 bold">
                                            {{ item.name }}
                                        </div>
                                        <div class="service-info mt10 mb10">
                                            <span>服务内容：</span>{{
                                                item.service_content
                                            }}
                                        </div>
                                        <div class="service-info">
                                            <span>服务周期：</span>{{ item.service_time }}
                                        </div>
                                    </div>
                                </div>

                                <div class="price flex-center-align">
                                    {{
                                        item.price == "0.00"
                                            ? "面议"
                                            : "￥" + item.price
                                    }}
                                </div>
                            </div>
                            <div class="line"></div>
                        </div>
                        <!--  -->
                        <div class="page">
                            <el-pagination background layout="prev, pager, next" :page-size="pagesize" :total="allCount"
                                :current-page="page" @current-change="changePage">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-else>
                        <el-empty description="暂无服务"></el-empty>
                    </div>
                </div>
                <!-- <div v-if="serviceInfo" class="js-page" v-show="navCurrent == 1">
                        <div v-if="serviceInfo.introduce" v-html="serviceInfo.introduce"></div>
                        <div v-if="!serviceInfo.introduce">
                            <el-empty description="暂无简介"></el-empty>
                        </div>
                    </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import bgImg from "@/assets/images/service/bj-1-5.png";
import { getServiceInfo } from "@/assets/api/service";
import { getanalysedata2 } from "@/assets/api/indexApi";
import { goTopSmooth } from "@/assets/utils/utils";
import { mapState } from "vuex";

export default {
    name: "ServiceDetail",
    head() {
        return {
            title: "服务商-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,服务商",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            keyword: "", //搜索关键字
            allCount: 0,
            goodServices: [],
            serviceInfo: {},
            navCurrent: 0,
            nav: ["服务", "公司简介"],
            fwList: [],
            bgImg: bgImg,
            id: "",
            service_cate_name: '',

            page: 1,
            pagesize: 16,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        this.$loads.show();

        goTopSmooth();
        this.id = this.$route.query.id;
        this.getServiceInfo();
    },
    methods: {
        //获取不同的服务商类型
        getServiceType(type) {
            var text = "";
            switch (type) {
                case 1:
                    text = "企业服务商";
                    break;
                case 2:
                    text = "企业服务商";
                    break;
                case 3:
                    text = "企业服务商";
                    break;
                case 4:
                    text = "企业服务商";
                    break;
                case 5:
                    text = "企业服务商";
                    break;
                case 6:
                    text = "个人服务商";
                    break;
            }
            return text;
        },

        //获取服务商详情
        async getServiceInfo() {
            var params = {
                id: this.id,
                keyword: this.keyword,
                page: this.page,
                pagesize: this.pagesize,
            };
            let res = await getServiceInfo(params);

            this.$loads.hidden();
            if (res.code == 1) {
                if (res.data.info) {
                    this.serviceInfo = res.data.info;
                } else {
                    this.serviceInfo = null;
                }
                this.service_cate_name = res.data.service_cate_name
                this.goodServices = res.data.good_services;
                this.fwList = res.data.serviceshoplist.data;
                this.allCount = res.data.serviceshoplist.count;
                getanalysedata2({
                    m_id: 9,
                    type: 1,
                    code: "PH1",
                    describe:
                        "服务商-" + (res.data.info ? res.data.info.name : ""),
                });
            } else {
                this.$message({
                    message: res.msg,
                    type: "warning",
                });
            }
        },
        //去搜索
        goSearch() {
            if (this.keyword == "") {
                this.$message.warning("请输入搜索内容");
                return;
            }
            this.getServiceInfo();
            this.keyword = "";
        },

        getEllipsis(textStr) {
            if (textStr) {
                if (textStr.length > 130) {
                    return textStr.substring(0, 131) + "......";
                } else {
                    return textStr;
                }
            } else {
                return "暂无公司简介";
            }
        },
        //去详情
        go(path) {
            this.$router.push({
                path: path,
            });
        },

        // 打开客服
        openKefu() {
            const token = window.localStorage.getItem("token");
            if (!token) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$alert(this.serviceInfo.tel, '联系电话', {
                confirmButtonText: '确定',
                callback: action => {

                }
            });
            // localStorage.setItem("to_zim_userid", this.serviceInfo.user_id);
            // this.$router.push({
            //     path: "/service/servicechat",
            // });
        },

        //分页
        changePage(e) {
            this.page = e;
            this.getServiceInfo();
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.serviceShops {
    height: 100%;
    padding-bottom: 30px;

    .top-nav {
        width: 100%;
        height: 266px;
        background-repeat: no-repeat;
        background-size: cover;

        .shop-info {
            position: relative;
            margin: 0 auto;
            padding-top: 60px;
            width: 1200px;
            height: 100%;

            .left {
                .img {
                    width: 130px;
                    height: 130px;
                    border-radius: 50%;
                    background-color: #d8d8d8;
                    object-fit: cover;
                }

                .login-status {
                    margin: 0 auto;
                    margin-top: 20px;
                    display: flex;
                    align-items: center;

                    .dot {
                        margin-right: 5px;
                        width: 10px;
                        height: 10px;
                        background: #4ed08d;
                        border-radius: 50%;
                    }
                }
            }

            .middle {
                margin-left: 40px;

                .title {
                    .tips {
                        font-size: 12px;
                        width: 80px;
                        height: 24px;
                        border-radius: 2px;
                        // border: 1px solid #ffffff;
                        color: #fff;
                    }
                }

                .local {
                    margin: 20px 0;
                }

                .text {
                    max-width: 745px;
                    // height: 87px;
                    line-height: 2;
                    font-size: 13px;
                }

                .text-html {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                }
            }

            .right {
                position: absolute;
                right: 0;
                top: 60px;
                color: #fff;
                font-size: 14px;
                width: 127px;
                height: 40px;
                border-radius: 2px;
                border: 1px solid #ffffff;
            }
        }
    }

    .main-content {
        margin: 0 auto;
        margin-top: 28px;
        width: 1200px;
        min-height: 400px;
        background: #fff;


        .top {
            color: #9e9e9e;
            padding: 0 40px;
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #e7e7e7;

            .fw {
                cursor: pointer;
                color: #999;
            }

            .box-title {
                display: flex;
                align-items: center;
                font-weight: 500;
                font-size: 16px;
                color: #1B8DFF;

                img {
                    width: 24px;
                    height: 24px;
                    display: block;
                    margin-right: 8px;
                }
            }
        }

        .fw-page {
            width: 100%;
            padding: 20px 33px;

            .item {
                .middle {
                    max-width: 500px;

                    .service-info {
                        max-height: 60px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;

                        span {
                            font-weight: 600;
                        }
                    }
                }

                img {
                    width: 96px;
                    height: 96px;
                    border-radius: 4px;
                    margin-right: 24px;
                }

                .price {
                    display: flex;
                    justify-content: flex-start;
                    width: 110px;
                    font-weight: 600;
                    font-size: 24px;
                    color: #FF6900;
                }
            }

            .line {
                margin: 30px 0;
                width: 100%;
                height: 1px;
                border: 1px solid #e7e7e7;
            }

            .page {
                padding-top: 13px;
                padding-bottom: 63px;
                display: flex;
                justify-content: center;
            }
        }

        .js-page {
            width: 100%;
            padding: 60px;
        }

        .right-side {
            margin-left: 18px;
            padding: 20px 30px;
            width: 310px;
            max-height: 500px;
            background: #fff;

            .service-items {
                margin-top: 20px;
                margin-right: 16px;
                padding: 0 10px;
                display: inline-block;
                height: 31px;
                font-size: 13px;
                line-height: 31px;
                border-radius: 60px;
                border: 1px solid #8a8a8a;

                // &:hover {
                //     cursor: pointer;
                //     background-color: #ff8f1f;
                //     color: #fff;
                //     border: 1px solid #fff;

                // }
            }
        }
    }
}

.dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #fff;
}

.needMore {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    position: relative;
    z-index: 2;

    &:after {
        content: " ...";
        position: absolute;
        bottom: 0;
        right: 0rpx;
        padding-right: 120rpx;
        padding-left: 8rpx;
        background: linear-gradient(to right, transparent, #fff 0%);
    }
}

.more {
    position: absolute;
    bottom: 0rpx;
    color: #1c87f3;
    right: 56rpx;
    z-index: 9;
}

::v-deep .el-input__inner {
    border: 1px solid #1B8DFF;
    border-radius: 31px;
    background-color: #ffffff;
    height: 34px;
}

.box-search {
    position: relative;

    .shousuo {
        position: absolute;
        top: 13px;
        right: 0;
        width: 58px;
        height: 34px;
        background: #1B8DFF;
        border-radius: 34px;
        color: #ffffff;
        text-align: center;
        line-height: 34px;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }
    }
}
</style>